import Vue from "vue";
import VueRouter from "vue-router";;

Vue.use(VueRouter); //将VueRouter注入到每一个子组件里面

// 路由配置
// 一个数组
// 数组中是一个对象，由一个 path 映射 一个 component 


// 以后配置路由 只需要修改 routes

// 配置路由三部曲

  // 1.创建路由页面
  // 2.配置routes
  // 3.写上 router-view
const routes = [
  {
    path: "/",
    redirect:"/login"
  },
  {
    path:'/conter',
    component:() => import("../pages/conter")
  },
  {
    path:'/other',
    component:()=> import("../pages/other")
  },
    {
      path:'/my',
      component: () => import (/*webpackChunkName:"my"*/"../pages/my")
    },
    {
      path:'/discover',
      // 重定向
      redirect:'/discover/toplist',
      component:() => import (/*webpackChunkName:"discover" */"../pages/discover"),
      
      //子级路由配置注意点：
      // 1. path开头不能带斜杠 
      // 2. 视图组件要放到父组件中

      children:[
        {
          path:"toplist",
          component: () => import ("../pages/discover/toplist"),
          name:"top"
        },
        {
          path:"playlist",
          component: () => import ("../pages/discover/playlist")
        }
      ]
    },
    { 
      path:'/friend',
      // 多视图 router-view配置， key就是router-view的name 
      components:{
        iii:()=> import("../pages/iii"),
        default:()=>import("../pages/friend")

      }
    },
    {
      path:'/cart',
      component:() => import("../pages/cart")
    },
    {
      path:"/list",
      component: () => import (/*webpackChunkName:"list" */"../pages/list"),
      name:"list"
    },
    {
      // 动态参数解耦合
      props:true,
      path:"/detail/:productid",  
      component: () => import("../pages/detail")
    },
    {
      path:"*",
      component: ()=> import(/*webpackChunkName:"page404" */"../pages/page404")
    },
    {
      path:'/login',
      component: ()=> import('../pages/login')
    },
    {
      path:"/home",
      component: ()=> import('../pages/home')
    }
];

const router = new VueRouter({
  mode:'hash',
  routes,
});

export default router;
